import authInstance from './utils.js';

document.addEventListener('DOMContentLoaded', function () {
    const loginButton = document.querySelector('button'); // 登录按钮
    const emailInput = document.querySelector('input[type="email"]'); // 邮箱输入框
    const passwordInput = document.querySelector('input[type="password"]'); // 密码输入框

    // 为邮箱和密码输入框创建错误信息容器
    const emailError = document.createElement('div');
    const passwordError = document.createElement('div');

    // 设置错误信息容器的样式
    emailError.className = 'error-message';
    passwordError.className = 'error-message';

    // 将错误信息容器添加到对应的输入框下方
    emailInput.parentNode.insertBefore(emailError, emailInput.nextSibling);
    passwordInput.parentNode.insertBefore(passwordError, passwordInput.nextSibling);

    loginButton.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 清空之前的错误信息
        emailError.textContent = '';
        passwordError.textContent = '';
        let isFormValid = true;

        // 检查邮箱是否已填写
        if (!emailInput.value.trim()) {
            emailError.textContent = '邮箱账号未填写。';
            isFormValid = false;
        }

        // 检查密码是否已填写
        if (!passwordInput.value.trim()) {
            passwordError.textContent = '密码未填写。';
            isFormValid = false;
        }

        if (!isFormValid) {
            // 如果表单无效，可以在这里添加其他逻辑，如聚焦到第一个错误的输入框
            if (emailInput.value.trim() === '') {
                emailInput.focus();
            } else if (passwordInput.value.trim() === '') {
                passwordInput.focus();
            }
        } else {
            // 如果表单有效，发送登录请求到服务器
            fetch('http://localhost:9090/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `email=${encodeURIComponent(emailInput.value)}&password=${encodeURIComponent(passwordInput.value)}`
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('登录失败');
                    }
                    return response.json(); // 假设后端返回的数据中包含token
                })
                .then(data => {
                    if (data.token) {
                        authInstance.setToken(data.token); // 存储token
                        alert('登录成功');
                        // 这里可以添加登录成功后的逻辑，例如跳转到仪表板页面
                        window.location.href = 'personalinfo.html'; // 假设登录成功后跳转到个人信息页面
                    } else {
                        alert('登录失败，请重试。');
                    }
                })
                .catch(error => {
                    alert('登录过程中出现错误: ' + error.message);
                    // 这里可以添加错误处理逻辑，例如显示错误信息
                });
        }
    });
    // 游客登录逻辑
    const guestLoginLink = document.querySelector('.guest-login');
    guestLoginLink.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止链接默认行为
        // 弹出输入框让用户设置昵称
        var nickname = prompt("请输入昵称进行游客登录：");
        if (nickname) {
            // 发送昵称到服务器进行游客登录
            fetch('http://localhost:9090/user/loginByNickname', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `nickName=${encodeURIComponent(nickname)}`
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('登录失败');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data && data.token) { // 假设后端返回的数据中包含token
                        authInstance.setToken(data.token); // 存储token
                        alert('登录成功', data);
                        // 这里可以添加登录成功后的逻辑，例如跳转到仪表板页面
                        window.location.href = 'personalinfo.html'; // 假设登录成功后跳转到个人信息页面
                    } else {
                        alert('登录失败，请重试。');
                    }
                })
                .catch(error => {
                    alert('登录过程中出现错误:', error);
                    // 这里可以添加错误处理逻辑，例如显示错误信息
                });
        } else {
            alert('昵称不能为空！');
        }
    });
});